<template>
	<view class="login">
		<view class="head">
			<text style="color: aliceblue;">{{APP_VERSION}}</text>
		</view>
		<view class="middle">
			<image class="logo" src="/static/logo.png"></image>
			<view class="middle-form">
				<up-form :model="form" :rules="rules" ref="formRef">
					<up-form-item prop="username">
						<view class="input1">
							<up-icon name="map-fill" color="#ffffff" size="27" />
							<up-input v-model="form.username" />
							<up-icon name="arrow-down-fill" color="#ffffff" size="27" />
						</view>
					</up-form-item>

					<up-form-item prop="password">
						<view class="input2">
							<up-icon name="lock" color="#ffffff" size="27" />
							<up-input v-model="form.password" />
						</view>
					</up-form-item>

					<up-button :customStyle="customStyle" type="primary" @click="logn">登录</up-button>

				</up-form>
			</view>

			<view class="xieyi" @click="openEdit">
				<view class="check" @click=" checkEnter = !checkEnter">
					<view class="check-enter" v-show="checkEnter" />
				</view>
				已阅读并同意
				<text style="color: #ffffff;">
					《用户服务协议》
				</text>
			</view>
		</view>
		<view class="footer">
			<view class="footer-content">
				<view>学生营养餐智慧云</view>
				<view>Copyright 贵州山久长青科技集团有限公司</view>
			</view>
		</view>
		<Popup v-model:show="showEdit" @update:show="showAgree"></Popup>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		APP_VERSION
	} from '/utils/version.js'
	import {
		login
	} from '@/api/login/index.js';
	import Popup from '@/components/Popup/index.vue'
	import {
		setToken
	} from '@/utils/auth.js'


	const customStyle = reactive({
		marginTop: '30rpx',
		borderRadius: '10rpx'
	});

	// 使用 ref 创建响应式引用   
	const formRef = ref(null);

	const form = ref({
		username: "admin",
		password: "123456"
	})

	// 协议按钮圈
	const checkEnter = ref(false)

	// 校验规则  
	const rules = {
		username: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change'],
		}, ],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change'],
		}, ],
	};

	// 是否显示Popup弹出层
	const showEdit = ref(false);

	const openEdit = () => {
		showEdit.value = true
	}
	const showAgree = (value) => {
		// if(value){}
		console.log('子组件传过来的值', value)
		// checkEnter.value = !value
		// @click=" checkEnter = !checkEnter"
	}

	const logn = () => {
		formRef.value.validate().then(valid => {
			if (!checkEnter.value) {
				uni.showToast({
					title: '请阅读用户服务协议',
					icon: 'error'
				})
				return
			}
			if (valid) {
				uni.$u.toast('校验通过')
				login(form.value).then((res) => {
					console.log('返回数据', res)
					const token = res.data.accessToken
					// 将获取的token存储到本地缓存中
					setToken(token)
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						})

					}, 500)
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}

	onMounted(() => {
		console.log(APP_VERSION)
	})
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 100vh;

		background-color: #01a8df;

		.head {
			display: flex;
			justify-content: flex-end;
			margin-right: 20px;
			// margin-top: 20px;
		}

		.middle {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.logo {
				border-radius: 50rpx;
				height: 200rpx;
				width: 200rpx;
				margin-top: 100rpx;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50rpx;
			}

			.middle-form {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 80vw;
				height: 350rpx;
				background-color: #81cce9;
				border-radius: 20rpx;
				padding: 30rpx;
			}

			.xieyi {
				margin-top: 30rpx;
				margin-left: 280rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// box-sizing: border-box;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;

				.check {
					width: 27rpx;
					height: 27rpx;
					border: 1rpx solid #ffffff;
					border-radius: 50%;
					margin: 0 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.check-enter {
						box-sizing: border-box;
						pointer-events: none;
						width: 18rpx;
						height: 18rpx;
						background: #ffffff;
						border-radius: 50%;
					}
				}
			}
		}

		.footer {
			width: 100vw;
			position: fixed;
			bottom: 0;

			.footer-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #ffffff;
			}
		}

	}

	::v-deep.input1 {
		width: 100%;
		display: flex;

		.u-input {
			background-color: #ffffff;
		}

		.u-icon:nth-child(1) {
			background-color: #01a8df;
			border-radius: 10rpx 0rpx 0rpx 10rpx;
		}

		.u-icon:nth-child(3) {
			background-color: #01a8df;
			border-radius: 0rpx 10rpx 10rpx 0rpx;
		}
	}

	::v-deep.input2 {
		width: 100%;
		display: flex;

		.u-icon {
			background-color: #01a8df;
			border-radius: 10rpx 0rpx 0rpx 10rpx;
		}

		.u-input {
			border-radius: 0 10rpx 10rpx 0;
			background-color: #ffffff;
		}
	}
</style>